<template>
    <div class="comment-container">
        <h3>发表评论</h3>
        <hr>
        <textarea maxlength="120" placeholder="最多吐槽120字"></textarea>
        <mt-button type="primary" size="large">开始BB----{{this.id}}</mt-button>

        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-02-02 12：34：56</div>
                <div class="cmt-body">锄禾日当午 复方甘草片</div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-02-02 12：34：56</div>
                <div class="cmt-body">锄禾日当午 复方甘草片</div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-02-02 12：34：56</div>
                <div class="cmt-body">锄禾日当午 复方甘草片</div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-02-02 12：34：56</div>
                <div class="cmt-body">锄禾日当午 复方甘草片</div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-02-02 12：34：56</div>
                <div class="cmt-body">锄禾日当午 复方甘草片</div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2020-02-02 12：34：56</div>
                <div class="cmt-body">锄禾日当午 复方甘草片</div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain>加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return{
        }
    },
    methods:{
        getCommentList(){
            // console.log(this.id);
        }
    },
    created(){
        // this.getCommentList();
    },
    // 父组件于子组件之间的传值需要使用 props 来接收
    props:['id']
};
</script>
<style lang="less" scoped>
.comment-container {
    border-top: 1px solid #000;
    height: 500px;
    hr {
        margin-top: 0;
        margin-bottom: 4px;
    }
    h3 {
        font-size: 18px;
        margin: 0;
        text-align: center;
        padding: 15px 0;
    }
    textarea {
        font-size: 14px;
        height: 85px;
        margin: 0;
        padding: 5px 10px;
    }
    .cmt-list {
        margin: 5px 0;
        .cmt-item {
            font-size: 13px;
            .cmt-title {
                line-height: 35px;
                background-color: #ccc;
            }
            .cmt-body {
                line-height: 35px;
                text-indent: 2em;
            }
        }
    }
}
</style>

